<template>

    <masonry-table :data-source="tableList">
        <!--<template slot="header">-->
          <!---->
        <!--</template>-->
        <template slot="body" slot-scope="props">
            <div class="col-md-3">
            <div class="ibox">
                <div class="ibox-content product-box active">
                    <div class="product-imitation center-block">
                        [{{props.item.name}}]
                    </div>
                    <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.name}}
                        </span>
                        <!--<small class="text-muted">Category</small>-->
                        <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                        <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                            <!--<div class="row" v-if="key != 0">-->
                                <!--<div class="col-xs-8 ">-->
                                    <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                <!--</div>-->
                                <!--<div class="col-xs-4">-->
                                    <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                    <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="m-t text-righ">
                            <button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 使用</button>
                        </div>
                    </div>
                    <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                            <!--<div class="panel-body" v-if="key == 0">-->
                                <!--<div class="img">-->
                                    <!--<i class="default">封面图片</i>-->
                                    <!--<img :src="context.thumb_url ">-->
                                    <!--<span class="text-left">{{context.title}}</span>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="panel-body" v-if="key != 0">-->
                                <!--<div class="text">-->
                                    <!--<h4>{{context.title}}</h4>-->
                                <!--</div>-->
                                <!--<div class="img">-->
                                    <!--<img :src="context.thumb_url ">-->
                                    <!--<i class="default">缩略图</i>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="m-t text-righ">-->
                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                    <!--</div>-->
                </div>
            </div>
            </div>
        </template>
    </masonry-table>
</template>
<style scoped>
    /*.grid .ibox {*/
        /*margin-bottom: 0;*/
    /*}*/
    /*.content-title{*/
        /*max-width: 80%;*/
        /*overflow: hidden;*/
        /*white-space: nowrap;*/
        /*text-overflow: ellipsis;*/
    /*}*/
    /*.grid-item {*/
        /*margin-bottom: 25px;*/
        /*width: 20%;*/
        /*margin-right: 25px;*/
    /*}*/
    /*.product-imitation {*/
        /*height: 250px;*/
    /*}*/
</style>
<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: 'api/WeChat/WeChatTemplate',
                })
            };
        },
        methods: {
            showDialog: function (uuid) {
                this.stateManager.SeeDialogVisible = true;
                this.stateManager.SeeModelId = uuid;
            },
            showEditDialog: function (uuid) {
                //console.log(uuid);
                this.stateManager.editModelId = uuid;
                this.stateManager.editDialogVisible = true;

            },
            showDeleteDialog: function (uuid) {
                this.stateManager.deleteDialogVisible = true;
                this.stateManager.deleteModelId = uuid;
            },
            showSeeDialog:function (uuid) {
                this.stateManager.SeeDialogVisible = true;
                this.stateManager.SeeModelId = uuid;
            }
        },
        computed: {
            user(){
                return this.$store.state.user;
            },

            tableList(){
                if (this.stateManager.refreshList) {
                    this.list.fetch();
                    this.stateManager.refreshList = false;
                }
                return this.list;
            }
        }
    }
</script>